<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/comm/header.jsp"%>
<div class="container">

    <div id="toolbar">
        <div class="input-group" style="float: right;">
            <button type="button" class="btn btn-success add"><i class="glyphicon glyphicon-plus"></i> 添加员工</button>
        </div>
    </div>
    <table id="userTb"
            data-toggle="table"
            data-url="${ctx}/sys/user/list"
           data-striped="true"
           data-toolbar="#toolbar",
           <%--data-query-params="queryParams"--%>
            >
        <thead>
        <tr>
            <th data-checkbox="true"></th>
            <th data-field="name">员工姓名</th>
            <th data-field="sex">性别</th>
            <th data-field="phone">电话</th>
            <th data-field="password">密码</th>
            <th data-field="email">邮箱</th>
            <th data-field="jid">工作级别</th>
            <th data-field="remark">备注</th>
            <th data-field="createTime" data-formatter="timefmt">创建时间</th>
            <th data-formatter="caozuo" data-events="eve">操作</th>
        </tr>
        </thead>
    </table>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">添加员工</h4>
                </div>
                <div class="modal-body">
                    <form id="add" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3">员工姓名：</label>
                            <div class="col-md-8">
                                <input type="text" name="name" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">员工性别：</label>
                            <div class="col-md-8">
                                <input type="text" name="sex" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">员工电话：</label>
                            <div class="col-md-8">
                                <input type="text" name="phone" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">员工密码：</label>
                            <div class="col-md-8">
                                <input type="password" name="password" class="form-control"/>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="control-label col-md-3">邮箱：</label>
                            <div class="col-md-8">
                                <input type="text" name="email" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">工作级别：</label>
                            <div class="col-md-8">
                                <input type="text" name="jid" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">备注：</label>
                            <div class="col-md-8">
                                <input type="text" name="remark" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">创建时间：</label>
                            <div class="col-md-8">
                                <input type="Date" name="createTime" class="form-control"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary doadd">
                        添加
                    </button>
                </div>
            </div>
        </div>
    </div>






    <div class="modal fade" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" >修改员工</h4>
                </div>
                <div class="modal-body">
                    <form id="update" class="form-horizontal">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label class="control-label col-md-3">员工姓名：</label>
                            <div class="col-md-8">
                                <input type="text" name="name" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">性别：</label>
                            <div class="col-md-8">
                                <input type="text" name="sex" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">员工电话：</label>
                            <div class="col-md-8">
                                <input type="text" name="phone" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">密码：</label>
                            <div class="col-md-8">
                                <input type="text" name="password" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">邮箱：</label>
                            <div class="col-md-8">
                                <input type="text" name="email" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">工作级别：</label>
                            <div class="col-md-8">
                                <input type="text" name="jid" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">备注：</label>
                            <div class="col-md-8">
                                <input type="text" name="remark" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">创建时间：</label>
                            <div class="col-md-8">
                                <input type="date"  name="createTime" class="form-control"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary doupdate">
                        修改
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
<%@include file="/comm/footer.jsp"%>
<script src="${ctx}/static/js/user.js"></script>


<script>
    function caozuo() {
        var del = '<button class="btn btn-danger del">删除</button>';
        var update = '<button class="btn btn-info update">修改</button>';
        return del+"&emsp;"+update
    }
    $(".add").bind("click",function () {
        $("#add")[0].reset();
        $("#myModal").modal("show");
    })
    var eve ={
        "click .del":function (event,value,row) {
            swal({
                title:"确实要删除么？",
                text:"该操作不可逆，请谨慎操作！",
                type:"warning",
                showConfirmButton:true,
                showCancelButton:true,
                confirmButtonText:"确定",
                cancelButtonText:"取消"
            }).then(function () {
                $.post("${ctx}/sys/user/del","id="+row.id,function (msg) {
                    toastr.success(msg);
                    $("#userTb").bootstrapTable("refresh");
                },'text')
            })
        },
        "click .update":function (event,value,row) {
            $("#myModal2").modal("show");
            $("#update [name=id]").val(row.id);
            $("#update [name=name]").val(row.name);
            $("#update [name=sex]").val(row.sex);
            $("#update [name=phone]").val(row.phone);
            $("#update [name=password]").val(row.password);
            $("#update [name=email]").val(row.email);
            $("#update [name=jid]").val(row.jid);
            $("#update [name=remark]").val(row.remark);
            var s=(new Date()).toLocaleDateString(row.createTime)
            $("#update [name=createTime]").val(s);
            alert(s)
        }
    }
    $(".doupdate").bind("click",function () {
        var params =$("#update").serialize();
        $.post("${ctx}/sys/user/update",params,function (msg) {
            toastr.info(msg);
            $("#myModal2").modal("toggle");
            $("#userTb").bootstrapTable("refresh");
        },'text');
    })

    $(".doadd").bind("click",function () {
        var params =$("#add").serialize();
        $.post("${ctx}/sys/user/add",params,function (msg) {
            toastr.info(msg);
            $("#myModal").modal("toggle");
            $("#userTb").bootstrapTable("refresh");
        },'text');
    })
    function timefmt(value) {
        return(new Date()).toLocaleDateString(value);
    }
</script>

